<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输权限名称" clearable v-model="name" @clear="searchPermission">
                        <el-button slot="append" icon="el-icon-search" @click="searchPermission"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addPermissionFormVisible = true">添加权限</el-button>
                </el-col>
            </el-row>
            <el-table :data="permissionList" border stripe>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="权限名称" prop="name"></el-table-column>
                <el-table-column label="权限路径" prop="url"></el-table-column>
                <el-table-column label="权限类型">
                    <template slot-scope="sc">{{sc.row.urlType==1?'菜单权限':'接口权限'}}</template>
                </el-table-column>
                <el-table-column label="所属分类">
                  <template  v-if="sc.row.parent.id != -1" slot-scope="sc"><span v-for="p in parentList" v-if="sc.row.parent.id == p.id" v-text="p.name"></span></template>
                  <template  v-else>父菜单</template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removePermissionById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
          <!--添加权限的对话框-->
          <el-dialog title="添加权限" :visible.sync="addPermissionFormVisible" :close-on-click-modal=false>
            <el-form :model="addPermissionForm" size="small" ref="addPermissionForm" :rules="addPermissionFormRules">

              <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="addPermissionForm.name" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="类别" :label-width="formLabelWidth">
                <el-radio v-model="addPermissionForm.isParent" :label="1" >父菜单</el-radio>
                <el-radio v-model="addPermissionForm.isParent" :label="0">子菜单</el-radio>
              </el-form-item>
              <el-form-item v-if="addPermissionForm.isParent == 0" label="url" :label-width="formLabelWidth" prop="url">
                <el-input  v-model="addPermissionForm.url" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item v-if="addPermissionForm.isParent == 0" label="所属父菜单" :label-width="formLabelWidth">
                <el-select  placeholder="所属父菜单" v-model="addPermissionForm.parent.id">
                  <el-option v-for="p in parentList" :label="p.name" :value="p.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="resetForm('addPermissionForm')">重 置</el-button>
              <el-button @click="addFormVisible = false,resetForm('addPermissionForm')">取 消</el-button>
              <el-button type="primary" @click="saveAddPermission">确 定</el-button>
            </div>
          </el-dialog>

          <!--修改权限的对话框-->
          <el-dialog title="修改权限" :visible.sync="editPermissionFormVisible" :close-on-click-modal=false>
            <el-form :model="editPermissionForm" size="small" ref="editPermissionForm" :rules="editPermissionFormRules">
              <el-input type="hidden" v-model="editPermissionForm.id" autocomplete="off"></el-input>
              <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="editPermissionForm.name" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="类别" :label-width="formLabelWidth">
                <el-radio v-model="editPermissionForm.isParent" :label="1" disabled>父菜单</el-radio>
                <el-radio v-model="editPermissionForm.isParent" :label="0" disabled>子菜单</el-radio>
              </el-form-item>
              <el-form-item v-if="editPermissionForm.isParent == 0" label="url" :label-width="formLabelWidth" prop="url">
                <el-input  v-model="editPermissionForm.url" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item v-if="editPermissionForm.isParent == 0" label="所属父菜单" :label-width="formLabelWidth">
                <el-select  placeholder="所属父菜单" v-model="editPermissionForm.parent.id">
                  <el-option v-for="p in parentList" :label="p.name" :value="p.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="resetForm('editPermissionForm')">重 置</el-button>
              <el-button @click="editPermissionFormVisible = false,resetForm('editPermissionForm')">取 消</el-button>
              <el-button type="primary" @click="saveEditPermission">确 定</el-button>
            </div>
          </el-dialog>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
    </div>
</template>
<script>
import Vue from "vue";
    export default {
        data(){
            return {
                addPermissionFormVisible:false,
                editPermissionFormVisible:false,
                formLabelWidth: '120px',
                pageNum: 1,
                pageSize: 5,
                permissionList: [],
                total: 0,
                name: "", //权限名称
                urlTypeDesc: "菜单权限",
                parentList:[],
                addPermissionForm:{
                  name:'',
                  url:'',
                  isParent:1,
                  parent:{
                    id:''
                  }
                },
                newPermission:{
                  name:'',
                  url:'',
                  parent:{
                    id:'',
                  }
                },
                editPermissionForm:{
                  name:'',
                  url:'',
                  isParent:'',
                  parent:{
                    id:''
                  }
                },
                editPermission:{
                  id:'',
                  name:'',
                  url:'',
                  parent:{
                    id:'',
                  }
                },
                addPermissionFormRules:{

                },
                editPermissionFormRules:{

                },
            };
        },
        methods: {
            resetForm(formName){
              this.$refs[formName].resetFields();
            },
            saveAddPermission(){
                // console.log(this.addPermissionForm);
                if(this.addPermissionForm.isParent == 1){
                    this.newPermission.name = this.addPermissionForm.name;
                    this.newPermission.parent.id = -1;
                }else{
                    this.newPermission.name = this.addPermissionForm.name;
                    this.newPermission.parent.id = this.addPermissionForm.parent.id;
                    this.newPermission.url = this.addPermissionForm.url;
                }
                console.log(this.newPermission);
                let url = 'permission/add';
                this.$axios.put(url,this.newPermission)
                  .then(res=>{
                    if(res.data.code == 200){
                      this.$message({
                        type:'success',
                        message:res.data.msg,
                        duration:1000
                      })
                      this.initPermissions();
                      this.initParents();
                      this.resetForm('addPermissionForm');
                      this.addPermissionFormVisible = false;
                    }else {
                      this.$message({
                        type:'error',
                        message:res.data.msg,
                        duration:1000
                      })
                    }
                  })

            },
            handleSizeChange(size){
                this.pageSize = size;
                this.initPermissions();
            },
            handleCurrentChange(now){
                this.pageNum = now;
                this.initPermissions();
            },
            searchPermission(){
                this.initPermissions();
            },
            showEditDialog(obj){
               // console.log(obj);
                this.editPermissionFormVisible = true;
                if(obj.parent.id != -1){
                  //为子菜单
                  new Vue().$set(this.editPermissionForm,'id',obj.id);
                  new Vue().$set(this.editPermissionForm,'isParent',0);
                  new Vue().$set(this.editPermissionForm,'name',obj.name);
                  new Vue().$set(this.editPermissionForm,'url',obj.url);
                  new Vue().$set(this.editPermissionForm.parent,'id',obj.parent.id);
                }else{
                  new Vue().$set(this.editPermissionForm,'id',obj.id);
                  new Vue().$set(this.editPermissionForm,'isParent',1);
                  new Vue().$set(this.editPermissionForm,'name',obj.name);
                  new Vue().$set(this.editPermissionForm,'url','');
                  new Vue().$set(this.editPermissionForm.parent,'id',-1);
                }
            },
            saveEditPermission(){
                console.log(this.editPermissionForm);
                this.editPermission.id = this.editPermissionForm.id;
                this.editPermission.name = this.editPermissionForm.name;
                this.editPermission.url = this.editPermissionForm.url;
                this.editPermission.parent.id = this.editPermissionForm.parent.id;
                let url = 'permission/modify';
                this.$axios.put(url,this.editPermission)
                    .then(res=>{
                      if(res.data.code==200){
                        this.$message({
                          type:'success',
                          message:res.data.msg,
                          duration:1000
                        })
                        this.initPermissions();
                        this.initParents();
                        this.resetForm('editPermissionForm');
                        this.editPermissionFormVisible = false
                      }else {
                        this.$message({
                          type:'error',
                          message:res.data.msg,
                          duration:1000
                        })
                      }
                    })
            },
            removePermissionById(id){
              this.$confirm('确认删除吗，如果有子菜单，则子菜单也会被删除，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(()=>{

                let url = 'permission/del/'+id;
                this.$axios.delete(url)
                    .then(res=>{
                      if(res.data.code==200){
                        this.$message({
                          type:'success',
                          message:res.data.msg,
                          duration:1000
                        })
                        this.initPermissions();
                        this.initParents();
                      }else {
                        this.$message({
                          type:'error',
                          message:res.data.msg,
                          duration:1000
                        })
                      }
                    })
            })

            },
            reloadData(){

            },
            initPermissions(){
                let url = 'permission/list'
                this.$axios.get(url,{
                  params:{
                      now: this.pageNum,
                      size: this.pageSize,
                      name: this.name
                  }
                }).then(res=>{
                    if(res.data.code == 200){
                      console.log(res)
                        this.permissionList = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.pageSize = res.data.data.pageSize;
                        this.total = res.data.data.total;
                    }else {
                        this.$message({
                          type:'error',
                          message:res.data.msg,
                          duration:1000
                        })
                    }
                })
            },
            initParents(){
                let url = 'permission/getParents';
                this.$axios.get(url)
                  .then(res=>{
                    if(res.data.code == 200){
                      console.log(res)
                      this.parentList = res.data.data;
                      console.log(this.parentList)
                    }else {
                      this.$message({
                        type:'error',
                        message:res.data.msg,
                        duration:1000
                      })
                    }
                  })
            }
        },
        created() {
            // this.reloadData();
            this.initPermissions();
            this.initParents();
        }
    };
</script>
<style lang="less" scoped>
</style>